<template>
    <div class="main">
        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>餐馆日销售统计</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>餐馆日销售统计</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--折线图top 5 商品-->
        <div id="myChart" :style="{width: '100%', height: '600px'}"></div>

        <!--&lt;!&ndash;列表&ndash;&gt;-->
        <!--<el-table :data="tableData"  border style="width: 100%;margin-top: 20px">-->
            <!--<el-table-column prop="date" label="日期"></el-table-column>-->
            <!--<el-table-column prop="income" label="收入"></el-table-column>-->
            <!--<el-table-column prop="outcome" label="支出"></el-table-column>-->
        <!--</el-table>-->

        <!--&lt;!&ndash;分页&ndash;&gt;-->
        <!--<el-pagination-->
                <!--background-->
                <!--layout="prev, pager, next"-->
                <!--pagesize="20"-->
                <!--:total="pagination.total_pages">-->
        <!--</el-pagination>-->
    </div>
</template>
<script>

  export default {
    data() {
      return {
        options: [{
          value: 'price',
          label: '原价'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'score',
          label: '评分'
        }],
        prop: '',
        className:'right',
        tableData:[],
        title: '',
        author: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100,
        days: [],
        datas: []
      }
    },
    components: {

    },

    created() {
      this.bistroStaticDay()
    },

    mounted() {
      this.drawLine()
    },

    methods: {
      async drawLine(){
        let that = this
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: that.days
//              ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: that.datas
//            [{
//            data: [820, 932, 901, 934, 1290, 1330, 1320],
//            type: 'line',
//            smooth: true
//          }]
        });
      },


      shelfeBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('shelfBook', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '书籍上架成功',
              type: 'success'
            });
            this.bookList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })

      },
      changeRight(value) {
        this.className = value
      },

      bistroStaticDay() {
        let params = {
          date: '2018-11-26'
        }

        this.$store.dispatch('bistroStaticDay', params).then((ret) => {
//          this.tableData = ret.data.bistro_income_days.data
//          this.pagination.pagination  = ret.data.bistro_income_days.meta.pagination
            this.days = ret.days
            this.datas = ret.data
            this.drawLine()
        })

      },

      createProduct() {
        this.$router.push({ name: "createProduct" });
      }
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
</style>
